<template>
	<view class="wander-container init-page">
		<!-- #ifndef MP-WEIXIN -->
		<myuni-topbar>
		  <template v-slot:title>
			<text>排行榜</text>
		  </template>
		</myuni-topbar>
		<!-- #endif -->
		<view class="main-list">
			<myuni-playlist :playlist="tracks" :id="id" :desc="desc" @emitItem="getSong" @emitGetAll="getAllPlaylist"></myuni-playlist>
		</view>
		<myuni-player :currntSong="currntSong" @emitChangeSong="ChangeSong"></myuni-player>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
export default{
	data(){
		return {
			id:null,
			tracks:[],
			trackIds:[],
			desc:{},
			currntSong:{},
			single:true
		}
	},
	onLoad(option) {
		this.id = option.id
		this.initData()
		if(uni.getStorageSync('music').url){
			console.log('本地有音乐')
			var music = uni.getStorageSync('music')
			this.currntSong = music
		}
	},
	computed:{
		...mapState(['themeType'])
	},
	methods:{
		initData(){
			this.request({
				url:'/playlist/detail?id='+this.id
			}).then(res=>{
				this.tracks=res.playlist.tracks
				this.trackIds = res.playlist.trackIds.slice(this.tracks.length,100).map(val=>val.id)
				const {nickname,avatarUrl}=res.playlist.creator
				const {coverImgUrl,name}=res.playlist
				this.desc={coverImgUrl,name,nickname,avatarUrl}
				uni.setStorageSync('playlist',this.tracks)
			})
		},
	    getSong(item){
			const {picUrl,name}=item.al
			const {name:singer,id:singerId}=item.ar
			this.request({
				url:'/song/url?id='+item.id
			}).then(res=>{
				uni.setStorageSync('music',{id:res.data[0].id,picUrl,name,singer,singerId,url:res.data[0].url,playing:true,index:item.index,single:this.single,type:'playlist'})
				console.log(uni.getStorageSync('music'))
				this.currntSong = uni.getStorageSync('music')
			})
		},
		ChangeSong(isNext){
			let playlist=uni.getStorageSync('playlist')
			if(isNext){
				var index
				this.currntSong.index===playlist.length-1?index=0:index=this.currntSong.index+1
			}else{
				var index
				this.currntSong.index===0?index=playlist.length-1:index=this.currntSong.index-1
			}
			playlist[index].index=index
			this.getSong(playlist[index])
		},
		getAllPlaylist(){
			const ids = this.trackIds.join()
			this.request({
				url:'/song/detail?ids='+ids
			}).then(res=>{
				this.tracks=[...this.tracks,...res.songs]
				uni.setStorageSync('playlist',this.tracks)
			})
		},
		open(){
		        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
		        this.$refs.popup.open('top')
		}
	}
}
</script>

<style lang="scss" scoped>
page{
	background: linear-gradient(to bottom,#2a3740,#3e4a55,#435060);
}
.wander-container{
	.main-list{
		// margin-top: 100rpx;
	}
	::v-deep.player-container{
		bottom: 0;
	}
}
</style>
